<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
    <!--添加jquery-ui支持-->
    <link rel="stylesheet" th:href="@{/css/jquery-ui.min.css}"/>
</head>
<body>
<div layout:fragment="content">
    <h1 th:text="#{handover} + #{select}">交接记录查询</h1>
    <form id="handoverForm" class="form-horizontal" method="post">
        <div class="form-group">
            <label for="beginDate" class="col-sm-1 control-label" th:text="#{beginDate}">开始日期</label>
            <div class="col-sm-2">
                <input type="text" name="beginDate" id="beginDate" class="form-control"
                       th:placeholder="#{handover.date}"/>
            </div>

            <label for="endDate" class="col-sm-1 control-label" th:text="#{endDate}">结束日期</label>
            <div class="col-sm-2">
                <input type="text" name="endDate" id="endDate" class="form-control"
                       th:placeholder="#{handover.date}"/>
            </div>
            <label for="user" class="col-sm-1 control-label" th:text="#{user}">员工</label>
            <div class="col-sm-2">
                <select class="form-control" name="user" id="user">
                    <option value="" selected="selected">不限</option>
                    <th:block th:each="var : ${userList}">
                        <option th:value="${var.id}" th:text="${var.name}"></option>
                    </th:block>
                </select>
            </div>

            <label for="shift" class="col-sm-1 control-label" th:text="#{handover.shift}">班次</label>
            <div class="col-sm-2">
                <select class="form-control" name="shift" id="shift">
                    <option value="" selected="selected">不限</option>
                    <th:block th:each="var : ${shiftList}">
                        <option th:value="${var.id}" th:text="${var.name}"></option>
                    </th:block>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label for="detail" class="col-sm-1 control-label" th:text="#{handover.detailsList.detail}">内容</label>
            <div class="col-sm-5">
                <input type="text" name="detail" id="detail" maxlength="76" class="form-control"
                       th:placeholder="#{handover.detailsList.detail}"/>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-5 col-sm-7">
                <a href="javascript:void(0)" class="btn btn-info" id="addCookies" th:text="#{select}">搜索</a>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="javascript:void(0)" class="btn btn-info" id="clearCookies" th:text="#{reset}">重置</a>
            </div>
        </div>

        <h1 th:text="#{handover}">交接记录</h1>
        <div>
            <table class="table table-striped table-bordered">
                <thead>
                <tr>
                    <th th:text="#{no}">序号</th>
                    <th th:text="#{handover.date}">日期</th>
                    <th th:text="#{handover.shift}">班次</th>
                    <th th:text="#{user}">员工</th>
                    <th th:text="#{handover.temperature}">温度</th>
                    <th th:text="#{handover.humidity}">湿度</th>
                    <th th:text="#{edit}">编辑</th>
                </tr>
                </thead>
                <tbody>
                    <!-- 表格主体 -->
                </tbody>
            </table>
        </div>

        <div class="form-group">
            <div id="pagination" class="col-sm-7">
                <!-- 分页条位置 -->
            </div>

            <label for="page" class="col-sm-1 control-label" th:text="#{page}">页次</label>
            <div class="col-sm-1">
                <input type="text" name="page" id="page" class="form-control" value="1" required min="1"
                       th:placeholder="#{page}"/>
            </div>

            <label for="pageSize" class="col-sm-1 control-label" th:text="#{pageSize}">每页数量</label>
            <div class="col-sm-1">
                <input type="text" name="pageSize" id="pageSize" class="form-control" value="10" required min="1"
                       th:placeholder="#{pageSize}"/>
            </div>
            <div class="col-sm-1">
                <a href="javascript:void(0)" id="addCookies2" class="btn btn-info" th:text="#{select}">搜索</a>
            </div>
        </div>
    </form>
</div>

<th:block layout:fragment="pagescript">
    <!--添加jquery-ui支持-->
    <script th:src="@{/js/jquery-ui/jquery-ui.min.js}"></script>
    <script th:src="@{/js/jquery-ui/jquery-ui.datepicker-zh-CN.js}"></script>
    <script th:src="@{/js/jquery-viladate/jquery.validate.min.js}"></script>
    <script th:src="@{/js/jquery-viladate/messages_zh.min.js}"></script>
    <script th:src="@{/js/jquery.cookie.js}"></script>
    <script th:inline="javascript">
        var last, totalPages, first, number, totalElements;
        $(document).ready(function () {
            $("#beginDate , #endDate").datepicker({
                changeMonth: true,
                changeYear: true,
                showWeek: true,
                firstDay: 0,
                showOtherMonths: true,
                selectOtherMonths: true,
                showAnim: 'slideDown',
                showButtonPanel: true
            });
            $("#handoverForm").validate({
                onsubmit: true,

                rules: {
                    beginDate: {
                        dateISO: true
                    },
                    endDate: {
                        dateISO: true
                    }
                },
                messages: {},
                submitHandler: function (form) {
                    //form.submit();
                    //$.ajaxPost();
                },
                invalidHandler: function (form, validator) {
                    return false;
                }
            });
            $.initPage = function () {
                $("#beginDate").val($.cookie("beginDate"));
                $('#endDate').val($.cookie('endDate'));
                $("#user").val($.cookie('user'));
                $("#shift").val($.cookie('shift'));
                $('#detail').val($.cookie('detail'));

                if ($.cookie("page") !== undefined) $("#page").val($.cookie("page"));
                else $("#page").val(1);

                if ($.cookie('pageSize') !== undefined) $('#pageSize').val($.cookie('pageSize'));
                else $('#pageSize').val(10);
                /*
                if ($.cookie("beginDate") !== null) $("#beginDate").val($.cookie("beginDate"));
                else $("#beginDate").val("");

                if ($.cookie('endDate') !== null) $('#endDate').val($.cookie('endDate'));
                else $("#endDate").val("");

                if ($.cookie('user') !== null) $("#user").val($.cookie('user'));
                else $("#user").val("");
                    //$("#user").find("option[text='不限']").attr("selected", true);

                if ($.cookie('shift') !== null) $("#shift").val($.cookie('shift'));
                else $("#shift").val("");
                    //$("#shift").find("option[text='不限']").attr("selected", true);

                if ($.cookie("page") !== undefined) $("#page").val($.cookie("page"));
                else $("#page").val(1);

                if ($.cookie('pageSize') !== undefined) $('#pageSize').val($.cookie('pageSize'));
                else $('#pageSize').val(10);

                if ($.cookie('detail') !== null) $('#detail').val($.cookie('detail'));
                else $("#detail").val("");
                */
            };
            $("#addCookies").click(function () {
                var flag = $("#handoverForm").valid();
                if(!flag){
                    //没有通过验证
                    return;
                }
                if ($("#beginDate").val() !== '') $.cookie('beginDate', $("#beginDate").val(), {expires: 1, path: '/'});
                else $.removeCookie('beginDate', {path: '/'});
                if ($("#endDate").val() !== '') $.cookie('endDate', $("#endDate").val(), {expires: 1, path: '/'});
                else $.removeCookie('endDate', {path: '/'});
                if ($("#user").val() !== '') $.cookie('user', $("#user").val(), {expires: 1, path: '/'});
                else $.removeCookie('user', {path: '/'});
                if ($("#shift").val() !== '') $.cookie('shift', $("#shift").val(), {expires: 1, path: '/'});
                else $.removeCookie('shift', {path: '/'});
                if ($("#page").val() !== '') $.cookie('page', $("#page").val(), {expires: 1, path: '/'});
                else $.removeCookie('page', {path: '/'});
                if ($("#pageSize").val() !== '') $.cookie('pageSize', $("#pageSize").val(), {expires: 1, path: '/'});
                else $.removeCookie('pageSize', {path: '/'});
                if ($("#detail").val() !== '') $.cookie('detail', $("#detail").val(), {expires: 1, path: '/'});
                else $.removeCookie('detail', {path: '/'});

                $.ajaxPost();
            });
            $("#addCookies2").click(function () {
                $("#addCookies").click();
            });
            $.initPagination = function () {
                $("#pagination").empty();
                $("#pagination").append("<a href='javascript:void(0)'>首页</a>&nbsp;&nbsp;<a href='javascript:void(0)'>上页</a>&nbsp;&nbsp;");
                if(totalPages<=10){
                    for (var i=1;i<=totalPages;i++){
                        $("#pagination").append("<a href='javascript:void(0)'>"+i+"</a>&nbsp;&nbsp;");
                    }
                }
                else {
                    for (var i=1;i<=5;i++){
                        $("#pagination").append("<a href='javascript:void(0)'>"+i+"</a>&nbsp;&nbsp;");
                    }
                    $("#pagination").append("<span>.....</span>&nbsp;&nbsp;");
                    for (var i=totalPages-4;i<=totalPages;i++){
                        $("#pagination").append("<a href='javascript:void(0)'>"+i+"</a>&nbsp;&nbsp;");
                    }
                }
                $("#pagination").append("<a href='javascript:void(0)'>下页</a>&nbsp;&nbsp;<a href='javascript:void(0)'>尾页</a>&nbsp;&nbsp;");
                $("#pagination").append("<span>第"+ (Number(number)+1) +"页/共"+ totalPages +"页&nbsp;&nbsp;共"+ totalElements +"条结果</span>");

                $("#pagination>a").on("click",function () {
                    var text = $(this).html();
                    switch (text) {
                        case "首页":
                            if (!first) {
                                $.cookie('page', 1, {expires: 1, path: '/'});
                                $("#page").val($.cookie("page"));
                                $.ajaxPost();
                            }
                            break;
                        case "上页":
                            if (!first) {
                                $.cookie('page', Number($.cookie('page')) - 1, {expires: 1, path: '/'});
                                $("#page").val($.cookie("page"));
                                $.ajaxPost();
                            }
                            break;
                        case "下页":
                            if (!last) {
                                $.cookie('page', Number($.cookie('page')) + 1, {expires: 1, path: '/'});
                                $("#page").val($.cookie("page"));
                                $.ajaxPost();
                            }
                            break;
                        case "尾页":
                            if (!last) {
                                $.cookie('page', totalPages, {expires: 1, path: '/'});
                                $("#page").val(totalPages);
                                $.ajaxPost();
                            }
                            break;
                        default:
                            //alert(text);
                            $.cookie('page', text, {expires: 1, path: '/'});
                            $("#page").val(text);
                            $.ajaxPost();
                    }
                });
            }
            $.ajaxPost = function () {
                /*<![CDATA[*/
                var url = [[@{/handover/list/ajax}]];
                var ajaxUrl = [[@{/handover/edit}]] ;
                /*]]>*/

                $.ajax({
                    type: "post",
                    url: url,
                    contentType: "application/json;charset=utf-8",
                    data: "",
                    dataType: "json",
                    success: function (data) {
                        //alert("收到响应" + data);
                        //alert(FastJson.format(data));
                        //alert(data.length);
                        //alert(JSON.stringify(data))
                        //$("#p").html(JSON.stringify(data));

                        if (data.numberOfElements > 0) {
                            $("tbody").empty();
                            $.each(data.content, function (i, t) {
                                $("tbody").append("<tr><td>" + (i + 1) + "</td><td>" + t.date + "</td><td>" + t.shiftId.name + "</td><td>" + t.userId.name + "</td><td>" + t.temperature + "</td><td>" + t.humidity + "</td><td><a href=\"edit?id=" + t.id + "\">编辑</a></td></tr>")
                            });
                        }
                        else {
                            $("tbody").empty();
                            $("tbody").append("<tr><td colspan='7' align='center'>没有符合条件的数据</td></tr>");
                        }
                        first = data.first;
                        last = data.last;
                        totalPages = data.totalPages;
                        number = data.number;
                        totalElements = data.totalElements;
                        $.initPagination();
                    },
                    error: function () {
                        $("tbody").empty();
                        $("tbody").append("<tr><td colspan='7' align='center'>请求失败</td></tr>");
                        //alert("error");
                    }
                });
            }

            $("#clearCookies").click(function () {

                $.removeCookie('beginDate' ,{ path: '/' });
                $.removeCookie('endDate' ,{ path: '/' });
                $.removeCookie('user' ,{ path: '/' });
                $.removeCookie('shift' ,{ path: '/' });
                $.removeCookie('page' ,{ path: '/' });
                $.removeCookie('pageSize' ,{ path: '/' });
                $.removeCookie('detail' ,{ path: '/' });
                $.initPage();
                $.ajaxPost();
            });

            $.initPage();
            $.ajaxPost();
        });
    </script>
</th:block>

</body>
</html>